<template>
  <div class="goods-list">
    <div class="search">
      <el-input
        class="search-input"
        v-model="state.goods_info"
        :placeholder="props.placeholder"
        type="text"
        :prefix-icon="Search"
        clearable
        @clear="clear"
        v-debounce="[getGoodsListFn]"
      />
    </div>
    <div class="content">
      <el-scrollbar class="content-scrollbar">
        <GoodsListContent ref="GoodsListContentRef" v-model:list="allGoodsList" />
      </el-scrollbar>
    </div>
    <div class="pagination">
      <el-pagination
        small
        background
        layout="total, prev, pager, next, sizes"
        :page-sizes="[15, 25, 50, 100]"
        :total="total"
        v-model:current-page="state.page"
        v-model:page-size="state.page_size"
        @size-change="getGoodsListFn"
        @current-change="getGoodsListFn"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive, computed, onMounted, inject } from "vue";
import { Search } from '@element-plus/icons-vue'
import { getGoodsList } from "@/api/concreation";
import GoodsListContent from './GoodsListContent.vue'

interface Props{
  placeholder: string
  shop_id: number
}

interface ParamsType{
  shop_id: number
  goods_info: string
  page: number
  page_size: number
  goods_status: number
  stock_status: number
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '请输入商品名称或描述搜索',
  shop_id: 0
})

const state = reactive<ParamsType>({
  shop_id: 0,
  goods_info: '',
  page: 1,
  page_size: 15,
  goods_status: 2,
  stock_status: 1
})

const GoodsListContentRef = ref<HTMLElement|any>()
const select_goods_list = inject<Array<any>>('select_goods_list', [])
let allGoodsList = reactive<Array<any>>([])
let total = ref<number>(0)

const getGoodsListFn = async () => {
  const {total: total_, data} = await getGoodsList(state)
  total.value = total_
  allGoodsList.splice(0)
  if(data?.length){
    allGoodsList.push(...data)
    // !!select_goods_list.length && initSelectGoodsList([...data])
  }
}

const initSelectGoodsList = () => {
  if(select_goods_list.length){
    // const arr = allGoodsList.reduce((pre, cur) => {
    //   const index = select_goods_list.findIndex(item => item.id === cur.id)
    //   if(index >= 0){
    //     pre.push(cur)
    //     select_goods_list.splice(index, 1)
    //   }
    //   return pre
    // }, [])
    // GoodsListContentRef.value?.selectList.push(...arr)
    GoodsListContentRef.value?.emitSelectedList([...select_goods_list])
  }
}

const clear = () => {
  state.goods_info = ''
}

watch(()=>props.shop_id, async (val) => {
  state.shop_id = val
  state.page = 1
  state.page_size = 15
  await getGoodsListFn()
}, {immediate: true})

onMounted(() => {
  initSelectGoodsList()
})

</script>

<style lang="scss" scoped>
  .goods-list{

    .search{

    }
    .content{
      height: 418px;
      margin-top: 8px;
      .content-scrollbar{
        height: 418px;
      }
    }
    .pagination{

    }

  }
</style>
